<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Qt4 widgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Qt4 library, C++">
<meta name="description" content="In this chapter of the Qt4 tutorial, we will
cover some widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5536206-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Qt4 Widgets</h1>

<p>
In this part of the Qt4 C++ programming tutorial, we will talk about some basic 
Qt4 widgets. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Qt4 library has a 
rich set of various widgets. 
</p>


<h2>QLabel</h2>

<p>
The <code>QLabel</code> widget is used to display text and image. 
No user interaction is available. The following example will display text. 
</p>

<div class="codehead">label.h</div>
<pre class="code">
#ifndef LABEL_H
#define LABEL_H

#include &lt;QWidget&gt;
#include &lt;QLabel&gt;

class Label : public QWidget
{
  public:
    Label(QWidget *parent = 0);

  private:
    QLabel *label;

};

#endif
</pre>

<p>
This is a header file for our code example.
</p>


<div class="codehead">label.cpp</div>
<pre class="code">
#include &lt;QVBoxLayout&gt;
#include &lt;QFont&gt;
#include "label.h"

Label::Label(QWidget *parent)
    : QWidget(parent)
{
  QString lyrics = "Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone\n\
\n\
Here we are again, circles never end\n\
How do I find the perfect fit\n\
There's enough for everyone\n\
But I'm still waiting in line\n\
\n\
Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone";

  label = new QLabel(lyrics, this);
  label->setFont(QFont("Purisa", 10));

  QVBoxLayout *vbox = new QVBoxLayout();
  vbox->addWidget(label);
  setLayout(vbox);
}
</pre>

<p>
We use <code>QLabel</code> widget to display lyrics in a window. 
</p>

<pre class="explanation">
label = new QLabel(lyrics, this);
label->setFont(QFont("Purisa", 10));
</pre>

<p>
We create a label widget and set a specific font for it.
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include &lt;QApplication&gt;
#include &lt;QTextStream&gt;
#include "label.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Label window;

  window.move(300, 300);
  window.setWindowTitle("QLabel");
  window.show();

  return app.exec();
}
</pre>

<p>
The main file.
</p>


<img src="/img/gui/qt4/label.png" alt="QLabel">
<div class="figure">Figure: QLabel</div>


<h2>QSlider</h2>

<p>
<code>QSlider</code> is a widget that has a simple handle. 
This handle can be pulled back and forth. This way we are choosing a 
value for a specific task.
</p>

<div class="codehead">slider.h</div>
<pre class="code">
#ifndef SLIDER_H
#define SLIDER_H

#include &lt;QWidget&gt;
#include &lt;QSlider&gt;
#include &lt;QLabel&gt;

class Slider : public QWidget
{
  Q_OBJECT
  
  public:
    Slider(QWidget *parent = 0);

  private:
    QSlider *slider; 
    QLabel *label;

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">slider.cpp</div>
<pre class="code">
#include "slider.h"

Slider::Slider(QWidget *parent)
    : QWidget(parent)
{ 
  slider = new QSlider(Qt::Horizontal , this);
  slider->setGeometry(50, 50, 130, 30);

  label = new QLabel("0", this);
  label->setGeometry(230, 50, 20, 30);

  connect(slider, SIGNAL(valueChanged(int)), label, SLOT(setNum(int)));
}
</pre>

<p>
We display two widgets. A slider and a label. The slider will control the 
number displayed in the label. 
</p>

<pre class="explanation">
slider = new QSlider(Qt::Horizontal , this);
</pre>

<p>
A horizontal <code>QSlider</code> is created.
</p>

<pre class="explanation">
connect(slider, SIGNAL(valueChanged(int)), label, SLOT(setNum(int)));
</pre>

<p>
In this code line, we connect the <code>valueChanged()</code> signal 
to the predefined <code>setNum()</code> slot.
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include &lt;QApplication&gt;
#include "slider.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Slider window;

  window.move(300, 300);
  window.setWindowTitle("QSlider");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/slider.png" alt="QSlider">
<div class="figure">Figure: QSlider</div>


<h2>QSpinBox</h2>

<p>
<code>QSpinbox</code> is a widget that is used to handle integers 
and discrete sets of values. In our code example, we will have one 
spinbox widget. We can choose numbers 0..99. The currently chosen value is 
displayed on the titlebar of the window. 
</p>

<div class="codehead">spinbox.h</div>
<pre class="code">
#ifndef SPINBOX_H
#define SPINBOX_H

#include &lt;QWidget&gt;
#include &lt;QSpinBox&gt;

class SpinBox : public QWidget
{
  Q_OBJECT

  public:
    SpinBox(QWidget *parent = 0);

  private slots:
    void setTitle(int);

  private:
    QSpinBox *spinbox;

};

#endif
</pre>

<p>
The header file for the spinbox example. 
</p>

<div class="codehead">spinbox.cpp</div>
<pre class="code">
#include "spinbox.h"

SpinBox::SpinBox(QWidget *parent)
    : QWidget(parent)
{
  spinbox = new QSpinBox(this);
  spinbox->setGeometry(50, 50, 60, 30);

  connect(spinbox, SIGNAL(valueChanged(int)), 
      this, SLOT(setTitle(int)));

}

void SpinBox::setTitle(int val) 
{
  setWindowTitle(QString::number(val));

}
</pre>

<p>
We place a spinbox on the window. And connect the 
<code>valueChanged()</code> signal to the 
<code>setTitle()</code> method.
</p>

<pre class="explanation">
void SpinBox::setTitle(int val) 
{
  setWindowTitle(QString::number(val));
}
</pre>

<p>
The method will set a window title to the current number, 
chosen with the spinbox. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include &lt;QApplication&gt;
#include "spinbox.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  SpinBox window;

  window.resize(250, 150);
  window.move(300, 300);  
  window.setWindowTitle("0");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/spinbox.png" alt="QSpinBox">
<div class="figure">Figure: QSpinBox</div>


<h2>QLineEdit</h2>

<p>
<code>QLineEdit</code> is a widget that allows to enter and 
edit a single line of plain text. 
There are undo/redo, cut/paste and drag &amp; drop functions available 
for <code>QLineEdit</code> widget.
</p>

<p>
In our example, we show three labels and three line edits. 
</p>

<div class="codehead">ledit.h</div>
<pre class="code">
#ifndef LEDIT_H
#define LEDIT_H

#include &lt;QWidget&gt;

class Ledit : public QWidget
{
  public:
    Ledit(QWidget *parent = 0);

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">ledit.cpp</div>
<pre class="code">
#include &lt;QGridLayout&gt;
#include &lt;QLabel&gt;
#include &lt;QLineEdit&gt;
#include "ledit.h"

Ledit::Ledit(QWidget *parent)
    : QWidget(parent)
{
  QLabel *name = new QLabel("Name:", this);
  QLabel *age = new QLabel("Age:", this);
  QLabel *occupation = new QLabel("Occupation:", this);

  QLineEdit *le1 = new QLineEdit(this);
  QLineEdit *le2 = new QLineEdit(this);
  QLineEdit *le3 = new QLineEdit(this);

  QGridLayout *grid = new QGridLayout(); 

  grid->addWidget(name, 0, 0);
  grid->addWidget(le1, 0, 1);
  grid->addWidget(age, 1, 0);
  grid->addWidget(le2, 1, 1);
  grid->addWidget(occupation, 2, 0);
  grid->addWidget(le3, 2, 1);

  setLayout(grid);
}
</pre>

<p>
We display three labels and three line edits. These widgets are organized 
with the <code>QGridLayout</code> manager.
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "ledit.h"
#include &lt;QApplication&gt;


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Ledit window;

  window.move(300, 300);
  window.setWindowTitle("QLineEdit");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file.
</p>

<img src="/img/gui/qt4/lineedit.png" alt="QLineEdit">
<div class="figure">Figure: QLineEdit</div>


<h2>Statusbar</h2>

<p>
A statusbar is a panel, that is used to display status information 
about the application.
</p>

<p>
In our example, we have two buttons and a statusbar. Each of the buttons 
shows a message, if we click on them. The statusbar widget is part of the 
<code>QMainWindow</code> widget. 
</p>

<div class="codehead">statusbar.h</div>
<pre class="code">
#ifndef STATUSBAR_H
#define STATUSBAR_H

#include &lt;QMainWindow&gt;
#include &lt;QPushButton&gt;

class Statusbar : public QMainWindow
{
  Q_OBJECT  

  public:
    Statusbar(QWidget *parent = 0);

  private slots:
    void OnOkPressed();
    void OnApplyPressed();

  private:
    QPushButton *ok;
    QPushButton *apply;

};

#endif
</pre>

<p>
The header file for the example. 
</p>

<div class="codehead">statusbar.cpp</div>
<pre class="code">
#include &lt;QGridLayout&gt;
#include &lt;QLabel&gt;
#include &lt;QFrame&gt;
#include &lt;QStatusBar&gt;
#include "statusbar.h"

Statusbar::Statusbar(QWidget *parent)
    : QMainWindow(parent)
{
  QFrame *frame = new QFrame(this);
  setCentralWidget(frame);

  ok = new QPushButton("OK", frame);
  ok->move(20, 50);

  apply = new QPushButton("Apply", frame);
  apply->move(120, 50);

  statusBar();

  connect(ok, SIGNAL(clicked()), this, SLOT(OnOkPressed()));
  connect(apply, SIGNAL(clicked()), this, SLOT(OnApplyPressed()));
}

void Statusbar::OnOkPressed()
{
  statusBar()->showMessage("OK button pressed", 2000);
}

void Statusbar::OnApplyPressed()
{
 statusBar()->showMessage("Apply button pressed", 2000);
}
</pre>

<p>
This is statusbar.cpp file.
</p>

<pre class="explanation">
QFrame *frame = new QFrame(this);
setCentralWidget(frame);
</pre>

<p>
The <code>QFrame</code> widget is put into the center area of the 
<code>QMainWindow</code>
widget. 
</p>

<pre class="explanation">
ok = new QPushButton("OK", frame);
ok->move(20, 50);

apply = new QPushButton("Apply", frame);
apply->move(120, 50);
</pre>

<p>
We create and position two button widgets. 
</p>

<pre class="explanation">
statusBar();
</pre>

<p>
To display a statusbar widget, we call the <code>statusBar()</code> 
method of the <code>QMainWindow</code> widget. 
</p>

<pre class="explanation">
void Statusbar::OnOkPressed()
{
  statusBar()->showMessage("OK button pressed", 2000);
}
</pre>

<p>
The <code>showMessage()</code> method shows the message on the statusbar. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include &lt;QApplication&gt;
#include "statusbar.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Statusbar window;

  window.resize(250, 150);
  window.move(300, 300);
  window.setWindowTitle("QStatusBar");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file.
</p>


<img src="/img/gui/qt4/statusbar.png" alt="Statusbar example">
<div class="figure">Figure: Statusbar example</div>


<p>
In this part of the Qt4 tutorial, we have introduced several
Qt4 widgets. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 27, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

